<html>
    <head>
        <title>Hứa Tường Hải</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>

    <body>
        <h1 style="color: #5E4F71">Hứa Tường Hải</h1>
        <?php
        require_once 'model/db.php';
        ?>
        <?php
        $query = "SELECT * FROM companies";
        $companies = getData($query);
        ?>
        <?php
        $query = "SELECT * FROM apps";
        $apps = getData($query);
        ?>
        <form method="POST">
            <table>
                <tr><td>Key word :</td><td> <input type="text" name="keyword"   ></td></tr></br>
                <tr><td>Min fans :</td><td> <input type="text" name="min_fans" id= "min_fans" ></td></tr></br>

                <tr><td>Max fans :</td><td> <input type="text" name="max_fans" id="max_fans" ></td></tr></br>
                </br>
                <tr><td>Company :</td><td> <select name="id_company">
                            <?php foreach ($companies as $company): ?>
                                <option value="<?php echo $company['id'] ?>">
                                    <?php echo $company['name'] ?>
                                </option>
                            <?php endforeach; ?>
                        </select></td></tr></br>
                <tr><td>App :</td> <td><select name="id_app">
                            <?php foreach ($apps as $app): ?>
                                <option value="<?php echo $app['id'] ?>">
                                    <?php echo $app['name'] ?>
                                </option>
                            <?php endforeach; ?>
                        </select></td></tr>
                <tr><td></td><td> <input type="submit" name="submit" value="Search"></td></tr>
            </table>
        </form>

        <?php if (isset($_POST['submit'])): ?>
            <?php
            $min_fans = $_POST['min_fans'];
            $max_fans = $_POST['max_fans'];
            $keyword = $_POST['keyword'];
            $query = " SELECT * FROM pages
 
            WHERE (likes <= $max_fans)
            AND   (likes >= $min_fans)
            AND    (description LIKE '% $keyword %')
            LIMIT  0,50 ";
            $pages = getData($query);
            var_dump($query);
            ?>
            <?php if (!empty($pages)): ?>
                <table border ="1">
                    <tr>
                        <td> Name </td>
                        <td> Username </td>
                        <td> Picture </td>
                        <td> Like </td>      
                    </tr>
                    <?php foreach ($pages as $page): ?>
                        <tr><td><?php echo $page['name'] ?></td>
                            <td><?php echo $page['username'] ?></td>
                            <td><img src="<?php echo $page['picture'] ?>"></td>
                            <td><?php echo $page['likes'] ?></td>

                        </tr>

                    <?php endforeach; ?>
                <?php endif; ?>
            <?php endif; ?>
            <script>
                $(document).ready(function() {
                    $("#min_fans").click(function() {
                        var min_fans = $("#min_fans").val();
                        if ($.isNumeric(min_fans)) {
                            alert('íis Number');
                        } else {
                            alert('is Not Number');
                        }

                    });
                });
                $(document).ready(function() {
                    $("#max_fans").click(function() {
                        var max_fans = $("#max_fans").val();
                        if ($.isNumeric(max_fans)) {
                            alert('is Number');
                        } else {
                            alert('is Not Number');
                        }

                    });
                });
            </script>

    </body>          
</html>
